<template>
	<view>
		<view class="card" v-if="pageType==1">
			<view class="hint">服务商类型: </view>
			<radio-group class="rc-pay-radio" @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in agencyList" :key="item.value">
					<view class="between" style="margin-bottom: 30rpx;">
						<view class="flex" style="align-items: center;">
							<view class="way-txt">{{item.name}}</view>
						</view>
						<radio color="#F40E0E" :value="item.value" :checked="index === currentAgency" />
					</view>
				</label>
			</radio-group>
		</view>
		<view class="flex oneInput">
			<text style="color: #41644A;">*</text>
			<view class="title">姓名</view><input v-model="name" placeholder="请输入姓名"
				placeholder-style="color:#999999;font-size:30rpx;" />
		</view>
		<view class="flex oneInput">
			<text style="color: #41644A;">*</text>
			<view class="title">手机号</view> <input type="number" v-model="phone" placeholder="请输入手机号"
				placeholder-style="color:#999999;font-size:30rpx;" />
		</view>
		<view class="flex oneInput">
			<!-- <text style="color: #41644A;">*</text> -->
			<view class="title">微信号</view> <input v-model="weiChatNum" placeholder="请输入微信号"
				placeholder-style="color:#999999;font-size:30rpx;" />
		</view>
		<view class="flex oneInput" v-if="pageType==1">
			<text style="color: #41644A;">*</text>
			<view class="title">申请地址</view>
			<view class="addressBox">
				<addressPicker @region="selectCity"></addressPicker>
				<image class="downIcon" src="https://wx.2024csnl.com/static/mine/redDown.png"></image>
			</view>

		</view>

		<view class="textareaBox">
			<textarea class="textarea" v-model="remark" placeholder="备注(选填）" />
			<view class=" textNum">{{remark.length}}/140</view>
		</view>
		<view class="submitBtn flex" @click="onSubmit()">提交申请</view>

	</view>
</template>

<script>
	import {
		setJoinMsg
	} from "../../../api/index.js"
	import addressPicker from "../../../components/k-region/addressPicker.vue"
	import md5 from "../../../utils/md5.js";
	export default {
		components: {
			addressPicker
		},
		props: {
			pageType: {
				type: [Number, String]
			}
		},
		data() {
			return {
				currentAgency: null,
				agencyList: [{
						value: '6',
						name: '省级服务商',
					},
					{
						value: '5',
						name: '市级服务商',
					},
					{
						value: '4',
						name: '区县服务商',
					},
				], //代理类型
				selectAgencyType: '', //默认选择得代理类型
				name: '',
				phone: '',
				weiChatNum: '',
				remark: '',
				city: '', //展示用
				faultedAddress: [], //提交用城市数据
			}
		},
		methods: {
			// 切换代理
			radioChange(evt) {
				this.selectAgencyType = evt.detail.value
				// console.log(this.selectAgencyType,"this.selectAgencyType")
			},
			selectCity(e) {
				const {
					province_name,
					city_name,
					area_name
				} = e
				this.city = `${province_name},${city_name},${area_name}`
				this.faultedAddress = [province_name, city_name, area_name, ]
			},
			async submit() {
				const res = await setJoinMsg('s=/ApiMy/levelup', {
					levelid: this.pageType == 1 ? 4 : 2,
					areafenhong_area: this.faultedAddress[2], //区
					areafenhong_city: this.faultedAddress[1], //市
					areafenhong_province: this.faultedAddress[0], //省
					form0: this.name,
					form1: this.phone,
					form2: this.weiChatNum,
					form3: this.remark,
					form4: this.city,
					type: this.selectAgencyType
				})
				console.log(res, "res---".msg, )
				const {
					msg,
					payorderid,
					pay,
					money,
					status
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					// this.pageType == 1||pay==0 ? this.goBack(1500) : this.onSkip(
					// 	`/business/pages/business_tab/orderPay?money=${money}&orderId=${payorderid}`)
					pay==0 ? this.goBack(1500) : this.onSkip(
						`/business/pages/business_tab/orderPay?money=${money}&orderId=${payorderid}`)
				}
			},
			onSubmit() {
				const {
					name,
					phone,
					weiChatNum,
					remark,
					city,
					selectAgencyType,
					pageType
				} = this
				switch (true) {
					case selectAgencyType == '' && pageType == 1:
						this.showToast('请选择代理类型')
						break;
					case name == '':
						this.showToast('姓名不能为空')
						break;
					case !/^1[3456789]\d{9}$/.test(phone):
						this.showToast('请输入正确手机号码')
						break;
					// case weiChatNum == '':
					// 	this.showToast('微信号不能为空')
					// 	break;
					case city == '' && pageType == 1:
						this.showToast('请选择申请地址')
						break;
					default:
						this.submit()

				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.card {
		background: #F7F7F7;
		border-radius: 30rpx;
		margin-bottom: 30rpx;

		.hint {
			padding: 30rpx 0 0 30rpx;
			font-weight: 500;
		}

	}

	.rc-pay-radio {
		background: #F7F7F7;
		border-radius: 20rpx;
		padding: 29rpx 27rpx;
		box-sizing: border-box;


		.way-txt {
			font-size: 30rpx;
			color: #000;
		}
	}

	.addressBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 65%;
	}

	.downIcon {
		width: 25rpx;
		height: 18rpx;

	}

	.submitBtn {
		margin: 50rpx 0;
		color: #fff;
		font-size: 34rpx;
		background: #41644A;
		border-radius: 14rpx;
		padding: 20rpx 0;
		justify-content: center;
	}

	.textareaBox {
		position: relative;
	}

	.textNum {
		position: absolute;
		bottom: 20rpx;
		text-align: end;
		width: 95%;
	}

	.textarea {
		height: 232rpx;
		background: #F7F7F7;
		padding: 36rpx;
		width: 90%;
		font-size: 30rpx;
	}

	.oneInput {
		margin-bottom: 30rpx;
		font-size: 36rpx;
		padding: 30rpx 41rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		align-items: center;

		.title {
			width: 30%;
		}

		// input {
		// 	margin-left: 120rpx;
		// }
	}
</style>
